<template>
    <div ref="myDiv" class="pie-echarts">

    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    // 南丁格尔玫瑰图
    mounted() {
        const myChart = echarts.init(this.$refs.myDiv)
        
        myChart.setOption({
            tooltip: {
                trigger: 'item', //触发类型:item是图形触发，axis是坐标轴触发，none是什么都不触发
                formatter: '学科分布 <br/>{b0} : {c} ({d}%)', //提示框浮层内容格式器，支持字符串模板和回调函数两种形式
            },

            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [10, 60],
                    center: ['40%', '50%'],
                    roseType: 'area',
                    labelLine: {
                        length: 1,
                        length2: 2,
                    },
                    itemStyle: {
                        borderRadius: 1,
                    },
                    data: [
                        { value: 320, name: '前端' },
                        { value: 240, name: 'java' },
                        { value: 149, name: 'PYTH' },
                        { value: 100, name: 'C++' },
                        { value: 59, name: 'UI' },
                    ],
                },
            ],
        })
    },
}
</script>

<style>
.pie-echarts {
    height: 220px;
}
</style>